<template>
    <div>
      <a-button v-if="!disabled" @click="showMap">定位</a-button>
      <a-button v-else-if="this.value &&this.value!=''" @click="showMap">查看</a-button>
      <span v-else style="margin-left:10px;">  未定位</span>
      <tianditu :disabledButton="disabled" :mapId="mapId" ref="tianditu" @choseArea="choseArea"></tianditu>
      <span v-if="this.value &&this.value!=''" style="margin-left:10px;">  已定位</span>
    </div>
</template>



<script>
  import tianditu from './mapArea'

  export default {
        name: "mapArea",
      components: {tianditu},
      props: {
        disabled: {
          type: Boolean,
          required: false,
          default: false
        },
        value: {
          type: String,
          required: false
        },
        mapId:{
          type: String,
          required: false
        }
      },
      data() {
        return {}
      },
      mounted() {
        // this.init(this.value);
      },
      watch: {
        /*value(val) {
          this.init(val);
        },*/
      },
      methods: {
        /*init(value) {

        },*/
        showMap(){
          this.$refs.tianditu.show(this.value);
        },
        // 子modal回调
        choseArea: function (value) {
          this.$emit("change", value);
        },
      },
      model: {
        prop: 'value',
        event: 'change'
      },
    }
</script>

<style scoped>

</style>